<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload = function () {
//            var data = { counter: 0 }
            Vue.component('child', {
                // camelCase in JavaScript
                props: ['message'],
                template: '<span>{{ message }}</span>'
            });
            Vue.component('simple-counter', {
                template: '<button v-on:click="counter += 1">{{ counter }}</button>',
                // 严格来看 data 是一个函数，
                // 因此 Vue 不会警告，但是我们为每个组件实例
                // 返回同一个对象的引用
                data: function () {
                    return {counter: 0}
                }
            });
            new Vue({
                el: '#example-2',
                data: {
                    parentMsg: ''
                }

            });

        }
    </script>
</head>
<body>
<div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <div>
        <input v-model="parentMsg">
        <br>
        <child v-bind:message="parentMsg"></child>
    </div>
</div>
</body>
</html>